<template>
    <div ref="elscrollbar" class="el-scrollbar-main" v-show="pageShow">
        <div class="center-main-page">
            <div class="center-head">
                <div class="head-main">
                    <div class="login-box">
                      <div class="company_name">
                        <span class="main-title">{{webSiteSetings.websiteName}}</span>
                        <span class="text">{{webSiteSetings.websiteText}}</span>
                      </div>
<!--                        <span class="main-title">{{webSiteSetings.websiteName}}</span>
                        <span class="text">适用场景:企业培训 - 职业培训 - 继续教育</span> -->
                    </div>

                    <div class="re-data">

                        <div class="hand">
                            <div v-if="sysType != 'exam'" class="login-button" @click="goPage('/index')">首页</div>
                            <!-- <div class="login-button" >消息中心</div> -->
                            <img :src="$axios.defaults.baseURL+headImg">
                            <!-- <div>{{headImg}}</div> -->
                            <span class="out" @click="loginOut">退出</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-center">
                <div class="menu-box">
                    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="menuSelect">

                        <div class="main-menu" v-for="(item,index) in menuList" >
                            <el-submenu :index="item.index" v-if="item.list">
                                <template slot="title">
                                    <i class="iconfont " :class="item.icon"></i>
                                    <span>{{item.name}}</span>
                                </template>
                                <div v-for="(sub,index1) in item.list">
                                    <el-menu-item  :index="sub.index" v-if="!sub.list" style="padding-left:44px">{{sub.name}}</el-menu-item>

                                    <el-submenu :index="sub.index" v-if="sub.list" class="er-child">
                                        <template slot="title" >
                                            <span>{{sub.name}}</span>
                                        </template>
                                        <el-menu-item v-for="(sub1,index2) in sub.list" :index="sub.index" >{{sub1.name}}</el-menu-item>
                                    </el-submenu>
                                </div>

                            </el-submenu>
                            <el-menu-item :index="item.index" v-if="!item.list">
                                <i class="iconfont " :class="item.icon"></i>
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>
                        </div>

                    </el-menu>
                </div>
                <!-- <div class="content-box">
                  <nuxt-child class="new-center" @changeImg="changeImg"></nuxt-child>
                </div> -->
                <nuxt-child class="content-box" @changeImg="changeImg"></nuxt-child>
                <div class="clear"></div>
            </div>


        </div>
    </div>
</template>

<script>
import'../assets/css/style.less'
import'../assets/css/fonts/iconfont.css'
import 'babel-polyfill'
import Cookies from 'js-cookie'
import { Notification } from 'element-ui';
// import {sysType} from '../plugins/checkoutSys'
export default {
    components: {

    },
    data(){
        return{
            headImg:'',
            menuList:[
				{
					name:'首页',
					icon:'iconindex-copy',
					index:'1',
					path:'/home'
				},
				{
					name:'学习中心',
					icon:'iconxuexi',
					index:'2',
					list:[
						{
							name:'课程中心',
							index:'2-1',
							path:"/course_center"
						},
						{
							name:'我的课程',
							path:'/mycourse',
							index:'2-3'
						},
						{
							name:'我的证书',
							path:'/certificate',
							index:'2-5'
						},
						{
							name:'我的收藏',
							path:'/collection',
							index:'2-6'
						},
					],
				},
				{
					name:'考试中心',
					icon:'iconkaoshi',
					type:'1',
					index:'3',
					list:[
						{
							name:'考试报名',
							index:'3-1',
							path:"/signUp"
						},
						{
							name:'正式考试',
							index:'3-2',
							path:'/exams',
						},
						{
							name:'查询成绩',
							index:'3-3',
							path:'/inquireScore',
						},
						{
							name:'模拟练习',
							index:'3-4',
							path:'/mockTest',
						},
					   ],
				},
				{
					name:'个人中心',
					icon:'iconzhanghao',
					path:'/data',
					index:'4'
				},
			],
            userData:{},
            pageShow:false,
            webSiteSetings:{},
            sysType:''
        }
    },
    created(){
        if(Cookies.get("token") && Cookies.get('userData')){
            this.getData();
            this.getUserDetail();
        }else{
          this.$router.push("login")
        }
    },
    beforeDestroy(){
      // this.$data.destroy()
    },
    watch:{
        loginChange(){
            // console.log(1)
            // if(Cookies.get("token")){
            //     this.login = true;
            // }
            // else{
            //     this.login = false;
            // }
        },
    },
    computed:{
        loginChange(){
            //return Cookies.get("login");
        },
    },
    mounted(){
    },
    head() {
        return {
          title: '个人中心',
          meta: [
            {
              hid: 'description',
              name: 'description',
              content: this.description
            },
            {
              hid: 'keywords',
              name: 'keywords',
              content: this.keywords
            },
          ],
          link: [
              {rel: 'icon', type: 'image/x-icon', href: this.favicon}
          ]
        }
    },
    methods:{
        getData(){
            let that = this;
            this.$axios.$get("/f/index")
            .then(function (response) {

                //that.indexData = response.data;
                that.webSiteSetings = response.data.webSiteSetings;
                that.pageShow = true;

            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },
        getUserDetail() {
          let that = this;
          this.$axios.$post("/f/userDetail")
            .then(function(response) {
              let data = response.data;
              that.headImg = data.photo;
            })
            .catch(function(error) {
              // handle error
              console.log(error);
            })
        },
        menuSelect(index){
            this.menuList.forEach((item,i)=>{
                if(item.index==index){
                    if(item.path){
                        if(item.type){
                             window.open(item.path);
                        }
                        else{
                            console.log(133333)
                            this.$router.push(item.path);
                        }

                    }
                }
                if(item.list){
                    item.list.forEach((item1,i1)=>{
                        if(item1.index==index){
                            if(item1.path){
                                this.$router.push(item1.path)
                            }
                        }
                    })
                }
            })
        },
        changeImg(){
            console.log(1)
            if( Cookies.get('userData')){
                this.userData = JSON.parse(Cookies.get('userData'))
                console.log(this.userData)
            }
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
        goPage(url){
            this.$router.push(url);
        },
        select(index){
            this.menuList.forEach((item,i)=>{
                if(index==i){
                    item.addClass = "active";
                    this.$router.push(item.path);
                }
                else{
                    item.addClass = ""
                }
            })
        },
        isChange(){
            console.log(777111)
            this.isImg = false;
        },
        goSearch(){
            if(this.input==""){
                Notification.success({
                    title:'提示',
                    message:"请输入搜索内容"
                });
                return;
            }
            this.$router.push("/main/search/"+this.input)
        },
        loginAfter(){
            this.login = true;
            this.imgUrl = Cookies.get("photo");
            if(Cookies.get("vipFlag")=="true"){

                this.vipFlag = true;
            }
            else{
                this.vipFlag = false;
            }
        },
        noLogin(){
            this.login = false;
        },
        goTeacher(){
            this.$router.push("/teacherLogin")
        },
        goR(){
            this.$router.push("/register")
        },
        goL(type){
            this.$router.push("login/"+type)
        },
        goOut(item){
            if(item.url!=""){
                window.open("http://"+item.url);
            }
        },
        getStatus(obj){
            let that = this;
            this.getStatusPay(obj);
            this.timer = setInterval(() =>{
                that.getStatusPay(obj);
            }, 5000);
            setTimeout(()=>{
                clearInterval(that.timer);
                that.timer = null;
            },10*60*1000)
        },
        getStatusPay(obj){
            let that = this;
            this.$axios.$get("/f/order/findOrderTypeByNo?orderNo="+obj.no)
            .then(function (response) {
                if(response.data){
                    clearInterval(that.timer);
                    that.timer = null;
                    Notification.success({
                        title:'提示',
                        message:"您已支付成功"
                    });
                    that.$router.push("/main/movieContent/"+obj.id);
                }
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
        },
        imgChange(url){
            this.imgUrl = url;
        },
        getSeting(){
            let that = this;
            this.$axios.$get("/f/idx/index")
            .then(function (response) {
                let data = response.data;
                let obj = {};
                obj.setIngs = data.educationSetings;
                obj.list = data.educationFriendshipLinkList;
                that.setObj = obj.setIngs;
                that.description = data.educationSetings.websiteDesc;
                that.keywords = data.educationSetings.keyword;
                that.favicon = "http://www.jzcqedu.com:8080"+data.educationSetings.websiteIco;
                console.log(that.favicon)
                Cookies.set("description",that.description);
                Cookies.set("keywords",that.keywords);
                Cookies.set("favicon",that.favicon);
                that.list = obj.list;
                //that.logo ="http://www.jzcqedu.com:8080"+ data.educationSetings.websiteLogo;
                let list = data.bannerList;
                list.forEach((item,i)=>{
                    item.pictureUrl = "http://www.jzcqedu.com:8080"+item.pictureUrl;
                });
                that.bannerList = list;

            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
        },
        goMain(){
            this.$router.push("/main/index");
        },
        goCenter(){
            if(Cookies.get("type")=="student"){
                this.$router.push("/center/mycenter");
            }
            else{
                this.$router.push("/teacherAdmin/teacherData");
            }
        },
        loginOut(){
            let that = this;
            this.$confirm('请确认是否退出?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

                this.$axios.$post("/f/logout")
                .then(function (response) {
                    Cookies.remove("userData");
                    Cookies.remove("token");
                    Cookies.set("login","no",{ expires: 1 });
                    that.isLogin = false;
                    if(that.$route.meta.isLogin){
                      if(Cookies.get("sysType") == 'exam'){
                        that.$router.push("/login_exam")
                      }else{
                        that.$router.push("/index")
                      }
                    }
                    //that.$router.push("/login/"+Cookies.get("type"));

                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
            }).catch(() => {

            });
        }
    }
}
</script>

<style lang="less">
.clear{
    clear:both
}

#__nuxt{
    height:100%;
    #__layout{
        height:100%;
        position:relative;
    }
}
    .none-shaow{
        visibility:hidden;
    }

    .study-pagination{
        margin:50px  auto;
    }
    .el-scrollbar-main{
      width:100%;
      height:100%;
      position:absolute;
      left:0;
      top:0;
      .el-scrollbar__thumb{
        background-color: rgba(0,0,0,.7);
      }
    }
    .center-main-page{
        width:100%;
        height:100%;
        .allContent{
          width:100%;
         float: left;
        }
        .footer{
            width:100%;
            background:#0076ca;
            float:left;
            .footer-content{
                width:100%;
                margin:0 auto;
                padding-bottom:10px;
                .company{
                    line-height:30px;
                    text-align:center;
                    font-size:14px;
                    color:#ffffff;
                    float:left;
                    width:100%;
                    margin-top:20px;
                }
                .record{
                    line-height:30px;
                    text-align:center;
                    font-size:14px;
                    float:left;
                    color:#ffffff;
                    width:100%;
                }
                .company-data{
                    width:100%;
                    float:left;
                    margin-top:50px;
                    padding-bottom:10px;
                    border-bottom:1px solid #03a9f4;
                    .name{
                        width:100%;
                        display:block;
                        line-height:40px;
                        text-align:center;
                        font-size:16px;
                        color:#ffffff;
                    }
                    ul{
                        margin:0 auto;
                        height:40px;
                        display: table;
                        li{
                            line-height:40px;
                            float:left;
                            margin-right:20px;
                            font-size:16px;
                            cursor:pointer;
                            color:#ffffff;
                        }
                        li:last-child{
                            margin-right:0;
                        }
                    }
                }
                .content-item{
                    float:left;
                    .title{
                        line-height:30px;
                        font-size:22px;
                        color:#ffffff;
                        font-weight:500;
                        margin-bottom:15px;
                        span{
                            font-size:20px;
                            margin-left:10px;
                            color:#ffffff;
                        }
                    }
                    .img-box{
                        float:right;
                        .item{
                            width:150px;
                            margin-right:60px;
                            float:left;
                            img{
                                width:150px;
                                height:150px;
                                display:block;
                            }
                            .text{
                                line-height:30px;
                                margin-top:10px;
                                font-size:18px;
                                color:#ffffff;
                                text-align:center;
                                display:block;
                            }
                        }
                    }
                    .type{
                        line-height:35px;
                        font-size:16px;
                        color:#ffffff;
                        display:block;

                    }
                    .phone{
                        line-height:35px;
                        font-size:24px;
                        color:#979587;
                        margin-bottom:10px;
                        span{
                            font-size:12px;
                        }
                    }
                    .share{
                        width:30px;
                        height:30px;
                        border-radius:50%;
                        float:left;
                        margin-right:25px;
                        line-height:30px;
                        text-align:center;
                        font-size:20px;
                        color:#ffffff;
                    }
                    .iconweibo{
                        background:#00a6b5;
                    }
                    .iconweixin{
                        background:#2fa31b;
                    }
                    .content{
                        width:600px;
                        line-height:20px;
                        font-size:14px;
                        color:#ffffff;

                    }
                }
            }
        }
        .footer1{
            background:#eef1f3;
            .content-item{
                .title,.phone,.text{
                    color:#555555 !important;
                }
                .content{
                    color:#555555 !important;
                }
            }
            .footer-content{
                padding:40px 0 !important;

            }
        }
        .menu-box{
            width:100%;
            height:50px;
            background:#e8edf6;
            .el-menu{
                    background-color:#e8edf6;

                }
            .main-menu{
                width:100%;
                .is-active.el-menu-item{
                    background:#fff;
                    color:#0068b7;
                }
                .er-child{
                   .el-submenu__title{
                        padding-left:44px !important;
                    }
                }

                .iconfont{
                    display:inline-block;
                    width:20px;
                    height:20px;
                    line-height:20px;
                    text-align:center;
                    font-size:16px;
                }
                .el-icon-arrow-down{
                    font-size:16px;
                }
                .el-menu-item, .el-submenu__title{
                    height:45px;
                    line-height:45px;
                    font-size:16px;
                }
            }
            .main{
                width:1250px;
                margin:0 auto;
                height:100%;
                .name{
                    padding:0 25px;
                    line-height:50px;
                    font-size:16px;
                    color:#ffffff;
                    cursor:pointer;
                    height:100%;
                    display:block;
                    float:left;
                    position:relative;
                }
                .active:after{
                    content:'';
                    width:70%;
                    height:3px;
                    background:#ffffff;
                    left:15%;
                    bottom:1px;
                    position:absolute;
                }
                .name:before{
                    margin-right:5px;
                    font-size:18px;
                    position:relative;
                    top:1px;
                }
                .iconzhibobofangshexiangjiguankanmianxing:before{
                    font-size:22px;
                }
                .iconicon-test:before{
                    font-size:22px;
                }
            }
        }
        .main-center{
            background-color: #f4f4f4;
            width:1250px;
            margin:0 auto;
            height:calc(100% - 80px);
            // overflow-y: auto;
            .menu-box{
                width:220px;
                float:left;
                box-sizing:border-box;
                height:100%;
                padding-top:10px;
            }
            .content-box{
                float:left;
                width:calc(100% - 220px);
                // background-color: #edf2fa;
                // min-width: 1000px;
                height:100%;
                // overflow-y: auto;
                // background-color: #f4f4f4;
                .new-center{
                  width: 1250px;
                  margin: 0 auto;
                }
            }
            .content-box::-webkit-scrollbar {
              width: 6px;
              // height: 0px;
            }
            // 设置滚动条的背景色和圆角
            .content-box::-webkit-scrollbar-thumb  {
              background-color: #0076CA;
              border-radius: 6px;
            }
        }
        .center-head{
            width:100%;
            background:#0068b7;
        }
        .head-main{
            width:100%;
            box-sizing:border-box;
            padding:0 30px;
            margin:0 auto;
            height:80px;
            position:relative;

            .login-box{
                float:left;
                position:absolute;
                top:50%;
                left:30px;
                transform:translateY(-50%);
                // width:400px;
                height:70px;
                .company_name{
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  .main-title{
                      font-size:32px;
                      color:#ffffff;
                      float:left;
                  }
                  .text{
                      float:left;
                      font-size:16px;
                      color:#ffffff;
                  }
                }
                .logo{

                    height:60px;
                    margin-top:5px;
                    float:left;

                    cursor:pointer;
                    margin-right:10px;
                }
            }
            .re-data{
                position:absolute;
                right:30px;
                top:50%;
                transform:translateY(-50%);
                .inter{
                    float:right;
                    .text{
                        float:left;
                        padding:0 5px;
                        height:12px;
                        font-size:12px;
                        cursor:pointer;
                        line-height:12px;
                        color: #656363;
                        border-right: 1px #d2d2d2 solid;
                    }
                    .text:last-child{
                        border:0;
                    }
                }
                .hand{
                    margin-top:10px;
                    float:right;
                    height:50px;
                    // width:350px;
                    img{
                        width:50px;
                        height:50px;
                        display:block;
                        float:left;
                        border-radius:50%;
                        margin-left:25px;
                    }
                    .out{
                        display:block;
                        float:left;
                        padding:0 10px;
                        color:#fff;
                        font-size:16px;
                        height:28px;
                        line-height:28px;
                        margin-top:11px;
                        cursor:pointer;
                        float:left;
                        margin-left:10px;
                    }
                    .login-button{
                        display: block;
                        font-size: 16px;
                        color: #0053a2;
                        background-color: #fff;
                        padding:0 15px;
                        height: 28px;
                        margin-top:11px;
                        text-align: center;
                        line-height: 26px;
                        border: 1px solid #0053a2;
                        border-radius: 3px;
                        margin-right:10px;
                        cursor:pointer;
                        float:left;
                    }
                    .re-button{
                        display: block;
                        font-size: 16px;
                        color: #ffffff;
                        background-color: #fff;
                        padding:0 15px;
                        height: 28px;
                        text-align: center;
                        line-height: 28px;
                        background-color:#0053a2;
                        border-radius: 3px;
                        cursor:pointer;
                        float:left;

                    }
                }
            }

            .search-main{
                float:right;
                margin-right:40px;
                height:100%;
                position:relative;
                .iconVIP{
                    position: absolute;
                    right: -10px;
                    top: 5px;
                    font-size: 20px;
                    color: #ffe100;
                }
                .head{
                    width:50px;
                    height:50px;
                    display:block;
                    margin-top:10px;
                    float:left;
                    margin-left:35px;
                    border-radius:50%;
                }
                .text{
                    line-height:40px;
                    float:left;
                    margin-left:35px;
                    font-size:16px;
                    color:#444444;
                    margin-top:15px;
                    cursor:pointer;
                }
                .search-box{
                    width:470px;
                    height:40px;
                    position:relative;
                    margin-top:15px;
                    border-radius:20px;
                    overflow:hidden;
                    box-sizing:border-box;
                    border:1px solid #dedede;
                    float:left;
                    .iconsousuo1{
                        width:20px;
                        height:20px;
                        display:block;
                        position:absolute;
                        top:10px;
                        right:10px;
                        line-height:20px;
                        z-index:9;
                        text-align:center;
                        font-size:20px;
                        color:#3e83ff;
                        cursor:pointer;
                    }
                    .el-input__inner{
                        border:0;
                        color:#444444;
                    }
                    input::-webkit-input-placeholder {
                        color: #444444;
                    }
                }
            }
        }
    }
    .el-scrollbar{
        min-height:40px;
    }
</style>
